<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			position: relative;
			left: 0px;
			top: 0px;
		}

	</style>
	<script type="text/javascript">
		window.onload=function  () {
			var box = document.getElementById('box');
			var stop = document.getElementById('stop');
			var start = document.getElementById('start');
			var width =1;
			var height =1;
			var c = 1;
			var run = function run(){
				if(c==1){
					width +=10;	

				}else if(c==0){
					width -=10;
					
				}
				if(width>=1290){
					c=0;
					dog.setAttribute('src',"./img/3.gif");
				}else if(width<=0){
					c=1;
					dog.setAttribute('src',"./img/1.gif");
				}
				box.style.left=width+'px';
			}			
			// setInterval(run, 100);
			var clear = setInterval(run, 100);
			var temp = 0;
			stop.onclick = function(){
				clearInterval(clear);
				temp = 0;
			}
			start.onclick = function(){
				if(temp==0){
				clear = setInterval(run, 100);
				temp = 1;
				}

			}
		}
	</script>

</head>
<body>

<div id="box">
	<img id="dog" src="./img/1.gif">
</div>

<input type="button" class="button" id="stop" value="开始" />
<input type="button" class="button" id="start" value="结束" />
</body>
</html>